<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { deleteGameUserMatch, getGameUserMatchList } from '@/api/game';
  import type { GameUserMatch } from '@/types/game';
  import { Modal } from '@arco-design/web-vue';
  import UserMatchCreator from './creator.vue';

  const props = defineProps<{
    gameId: string;
  }>();

  const list = ref<GameUserMatch[]>([]);

  const loading = ref(false);
  const getData = async () => {
    try {
      loading.value = true;
      const res = await getGameUserMatchList(props.gameId);
      list.value = res.data.data || [];
    } finally {
      loading.value = false;
    }
  };

  const creating = ref(false);
  const handleCreateDone = async (refresh: boolean) => {
    creating.value = false;
    if (refresh) {
      await getData();
    }
  };

  const handleDelete = (item: GameUserMatch) => {
    Modal.confirm({
      title: '提示',
      content: '确定要删除该配对？',
      onBeforeOk: async () => {
        await deleteGameUserMatch(props.gameId, item.matchTag);
        await getData();
      },
    });
  };

  onMounted(getData);
</script>

<template>
  <div>
    <a-spin :loading="loading" style="width: 100%">
      <a-row :gutter="[12, 12]">
        <a-col :span="6">
          <div class="user-match-trigger" @click="creating = true">
            添加新配对
          </div>
        </a-col>
        <a-col v-for="item in list" :key="item.matchTag" :span="6">
          <div class="user-match-item">
            <div class="user-match-user">
              <a @click="handleDelete(item)"><icon-close /></a>
              <div class="user-match-user-name">
                {{ item.users[0].nickname }}
                <span>{{ item.users[0].sex === 1 ? '男' : '女' }}</span>
                <span>{{
                  item.users[0].ageType === 1 ? '青少年' : '成人'
                }}</span>
              </div>
              <div class="user-match-user-info">
                {{ item.users[0].idNo || item.users[0].phone || '-' }}
              </div>
            </div>

            <div class="user-match-user">
              <a @click="handleDelete(item)"><icon-close /></a>
              <div class="user-match-user-name">
                {{ item.users[1].nickname }}
                <span>{{ item.users[1].sex === 1 ? '男' : '女' }}</span>
                <span>{{
                  item.users[1].ageType === 1 ? '青少年' : '成人'
                }}</span>
              </div>
              <div class="user-match-user-info">
                {{ item.users[1].idNo || item.users[1].phone || '-' }}
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-spin>
  </div>
  <UserMatchCreator
    v-if="creating"
    :game-id="gameId"
    @close="handleCreateDone"
  />
</template>

<style lang="less" scoped>
  .user-match {
    &-trigger {
      text-align: center;
      line-height: 102px;
      border: 1px dashed var(--color-border-2);
      cursor: pointer;
      border-radius: 3px;
      color: rgb(var(--primary-6));
      &:hover {
        border-color: rgb(var(--primary-6));
      }
    }
    &-item {
      border: 1px solid var(--color-border-2);
      padding: 6px 12px;
      border-radius: 3px;
      position: relative;
      a {
        display: none;
        position: absolute;
        right: 5px;
        top: 5px;
        color: rgb(var(--red-6));
        cursor: pointer;
      }
      &:hover {
        a {
          display: block;
        }
      }
    }
    &-user {
      &:first-child {
        margin-bottom: 10px;
      }
      &-name {
        height: 20px;
        display: flex;
        align-items: center;
        span {
          font-size: 12px;
          margin-left: 5px;
          color: var(--color-text-2);
        }
      }
      &-info {
        line-height: 20px;
        font-size: 12px;
        color: var(--color-text-3);
      }
    }
  }
</style>
